<template>
  <div class="search">
    <div>
      <a-spin :spinning="false">
        <a-steps :current="current" :style="{ marginBottom: '28px'}" size="small">
          <a-step title="基本信息"/>
          <a-step title="商品描述"/>
          <a-step title="参数规格"/>
        </a-steps>
      </a-spin>
    </div>
    <f-form ref="form" :action="api.product" :form-key="this.product.productId">
      <div v-show="current==0">
        <f-form-item label="商品分类" name="categoryIds" :required="true" data-type="array" type="cascader" :data="api.category.list" :value="product.categoryIds" @change="categoryChange"></f-form-item>
        <f-form-item label="商品名称" name="productName" :required="true" :value="product.productName"/>
        <f-form-item label="商品编号" name="productNo" :value="product.productNo"/>
        <!--        <f-form-item label="品牌" name="brandName" :value="product.brandName"/>-->

      </div>
      <div v-if="current==1">
        <f-form-item label="商品简介" name="productDesc" :required="true" type="editor" :value="product.productDesc" @change="editorChange"/>
        <f-form-item label="商品图片" type="upload" name="coverImage" tip="第一张将作为封面图" :value="product.sliderImageList" :file-max="5" @uploadSuccess="uploadSuccess"/>
        <f-form-item label="商品视频" type="video" name="productVideo" :value.sync="product.productVideo" @uploadSuccess="uploadVideoSuccess"/>
      </div>
      <div v-if="current==2">
        <div v-if="enableProductParams">
        <a-divider orientation="left" width="550">商品参数</a-divider>
        <div class="table">
          <a-row class="table_header" style="padding-left: 90px;padding-top: 10px">
            <a-col span="8">
              参数名称
            </a-col>
            <a-col span="10">
              参数值
            </a-col>
          </a-row>
          <template v-for="(item,groupIndex) in commonTemplate">
            <div class="table_header2">
              <a-input size="small" placeholder="分组名称" v-model="item.group" :disabled="!item.allowDel" style="padding-top:2px;width: 90px;" @on-change="(event) => changeGroup(event,item)"/>
              <a-icon type="plus" @click="addGroupItem(item)" class="pull-right" title="添加参数项" style="font-size: 18px"></a-icon>
            </div>
            <div class="table_body" style="padding-left: 180px">
              <a-row class="table_tr" v-for="(opt,index) in item.params">
                <a-col span="5" style="text-align: left">
                  <a-input placeholder="参数名称" v-model="opt.k" style="width: 90px;" :disabled="!opt.allowDel"/>
                </a-col>
                <a-col span="12" v-if="!opt.options||!opt.options.length">
                  <a-input placeholder="参数值" v-model="opt.v"/>
                  <a-icon type="close-circle" class="close" title="删除" @click="delGroupItem(item,opt,index)" v-if="opt.allowDel"/>
                </a-col>

                <a-col span="12" v-if="opt.options&&opt.options.length">
                  <a-select v-model="opt.selected" multiple>
                    <a-select-option v-for="o in opt.options" :value="o.name">{{ o.name }}</a-select-option>
                  </a-select>
                  <a-icon type="close-circle" class="close" title="删除" @click="delGroupItem(item,opt,index)" v-if="opt.allowDel"/>
                </a-col>

                <a-col v-if="index===item.params.length-1&&item.allowDel" span="6" style="right: 0px;">
                  <a-icon type="ios-trash-outline" @click="delGroup(item,groupIndex)" size="20" title="删除参数组"/>
                </a-col>

              </a-row>
            </div>
          </template>
        </div>
        <p class="btn" style="padding-top: 10px">
          <a-button type="dashed" style="width: 100%" @click="addGroup" icon="ios-add">
            添加参数组
          </a-button>
        </p>
        </div>
        <a-divider orientation="left">商品规格<span style="font-size: 14px;color: #b7b7b5"></span>
        </a-divider>
        <a-row v-for="(item,index) in specialSpecs" style="margin-bottom: 5px;">
          <a-row class="skuitem">
            <a-row>
              <a-input placeholder="规格名称" v-model="item.k" :disabled="!item.allowDel" clearable style="width: 150px;" @on-change="(event) => skuItemKChange(event,item)"/>
            </a-row>
            <a-row style="padding-top: 5px;padding-bottom: 5px;">
              <a-col span="6" :name="item.k" v-for="(opt,index) in item.selected" style="height:30px;padding-top: 3px;margin-bottom: 10px;" v-if="item.selected&&item.selected.length>0">
                <a-dropdown placement="bottomLeft" @on-click="(name)=>dropdownClick(name,opt)" :trigger="['click']">
                  <a-input v-model="opt.name" style="width: 150px;font-size: 12px" placeholder="规格值">
                    <f-color-picker slot="addonBefore" v-model="opt.value" @change="(color)=>headleChangeColor(color,opt)" v-if="item.type==1"></f-color-picker>
                    <a-icon type="close" slot="addonAfter" :style="{ fontSize: '10px', color: '#333' }" @click="removeOption(index,item.selected)"/>
                  </a-input>
                  <a-menu slot="overlay" v-if="item.options&&item.options.length>0&&item.options[0].name&&item.type!=1" @click="({ item, key, selectedKeys })=>dropdownClick(key,opt)">

                    <a-menu-item style="width: 120px;" v-for="option in item.options" :key="option.name" :title="option.name">{{option.name}}</a-menu-item>

                  </a-menu>
                </a-dropdown>
              </a-col>
              <a-button icon="ios-add" type="dashed" style="margin-top: 5px;" @click="addOption(item.selected)">
                添加 {{ item.k }}
              </a-button>
            </a-row>
            <a-icon type="delete" class="delSku" size="22" @click="removeSku(item,index)" v-if="item.allowDel"/>
          </a-row>
        </a-row>
        <a-row>
          <p>
            <a-button type="dashed" style="width: 100%" @click="addSku">添加规格</a-button>
          </p>
        </a-row>
        <a-divider orientation="left" style="width: 95%">规格列表<span style="font-size: 14px;color: #b7b7b5">(价格、数量、编号，必填)</span></a-divider>


        <div style="padding-bottom: 5px;">
          <a-table :dataSource="skus" bordered :pagination="false" rowKey="indexes">
            <a-table-column-group>
              <span slot="title" align="center">规格项</span>
              <template v-for="column in headers">
                <a-table-column :title="column.title" align="center" :dataIndex="column.dataIndex"/>
              </template>
            </a-table-column-group>
            <a-table-column-group>
              <span slot="title" align="center">价格</span>
              <a-table-column dataIndex="price" align="center">
                <span slot="title"><a-input-number :min="1" @change="batchSetPrice"/></span>
                <template slot-scope="text, record">
                  <a-input-number size="small" :min="1" v-model="record.price"/>
                </template>
              </a-table-column>
            </a-table-column-group>
            <a-table-column-group>
              <span slot="title" align="center">数量</span>
              <a-table-column dataIndex="num" align="center">
                <span slot="title"><a-input-number :min="1" @change="batchSetNum"/></span>
                <template slot-scope="text, record">
                  <a-input-number size="small" :min="1" v-model="record.num"/>
                </template>
              </a-table-column>
            </a-table-column-group>
            <a-table-column-group align="center">
              <span slot="title">编号</span>
              <a-table-column dataIndex="productNo">
                <span slot="title"><a-input @change="batchSetProductNo"/></span>
                <template slot-scope="text, record">
                  <a-input size="small" v-model="record.productNo"/>
                </template>
              </a-table-column>
            </a-table-column-group>

            <a-table-column title="规格图" align="center" dataIndex="images">
              <template slot-scope="text, record,index">
                <upload-images :value="record.images" :shop-tip="false" :fileMax="1" @change="(fileUrl,files,fileIds,removeIds)=>skuImageUploadSuccess(record,index,files,fileIds,removeIds)"></upload-images>
              </template>
            </a-table-column>
          </a-table>

        </div>
      </div>
    </f-form>
  </div>
</template>

<script>
  import { listToTree2 } from '@/utils/util'

  export default {
    name: 'ProductForm',
    props: {},
    data() {
      return {
        enableProductParams:true,
        loaded: false,
        product: this.getFormItem(),
        current: 0,
        isEdit: false,
        cascaderData: [],
        fileIds: [],
        removeIds: [],
        videoId: '',
        selectData: [],
        allSpecs: [{ params: [] }],
        specialSpecs: [],
        obj: new Map(),
        specificationsMap: new Map(),
        // 公共规格参数模板
        commonTemplate: [],
        columns: [{
          title: '价格',
          align: 'center',
          children: [
            {
              dataIndex: 'price',
              scopedSlots: { customRender: 'price' },
              align: 'center'
            }
          ]
        }, {
          title: '数量',
          align: 'center',
          children: [
            {
              dataIndex: 'num',
              scopedSlots: { customRender: 'num' },
              align: 'center'
            }
          ]
        },
          {
            title: '编号',
            align: 'center',
            children: [
              {
                scopedSlots: { customRender: 'productNo' },
                dataIndex: 'productNo',
                align: 'center'
              }
            ]
          },
          {
            title: '规格图片',
            scopedSlots: { customRender: 'images' },
            width: 250,
            align: 'center'
          }
        ]
      }
    },
    methods: {
      getFormItem() {
        return {
          categoryId1: '',
          categoryId2: '',
          productName: '',
          productPrice: 0,
          categoryIds: [],
          brandName: '',
          coverImage: '',
          productNo: '',
          productVideo: '',
          productDesc: '',
          productSeries: '',
          visibleType: 1,
          proImgLists: [],
          skus: [],
          onLineState: 1,
          visibleConfig: [],
          domestic: '',
          place: '',
          firerating: '',
          deliveryTime: 0,
          allSpec: '',
          privateSpec: ''
        }
      },
      setData(data) {
        this.$refs.form.resetFields()
        this.current = 0
        this.product = this.getFormItem()
        if (data && data.productId) {
          this.$refs.form.getDetails({ productId: data.productId }, (data) => {
            this.product = data
            // 排除allSpec,参数接收到productData
            const { allSpec, skus, ...productData } = data
            if (allSpec) {
              this.allSpecs = JSON.parse(allSpec)
            }
            // 编辑时使用商品表中已存储的规格模板
            this.getSpecifications(data.categoryId3)
            //me.$refs.editor.setData(data.productDesc)
            this.skuList = skus
            this.loaded = true
          })
          this.isEdit = true
        } else {
          this.loaded = true
        }
        this.enableProductParams=data.enableProductParams
      },
      editorChange(value) {
        this.product.productDesc = value
      },
      //商品图片上传回调
      uploadSuccess(fileUrl, files, fileIds, removeIds) {
        this.fileIds = fileIds
        this.product.coverImage = fileUrl
        this.removeIds.push(...removeIds)
      },
      //商品视频上传回调
      uploadVideoSuccess(fileUrl, file, fileId, removeIds) {
        this.videoId = fileId
        this.product.productVideo = fileUrl
        this.removeIds.push(...removeIds)
      },
      //规格图片上传回调
      skuImageUploadSuccess(row, index, files, fileIds, removeIds) {
        console.info('规格图片:', files)
        this.$nextTick(function() {
          this.skus[index].images = files
          this.skus[index].imageIds = fileIds
          this.removeIds.push(...removeIds)
        })
      },
      //上一步
      pre(stepIndex) {
        if (this.current > 0) {
          this.current--
          stepIndex = this.current
        }
        return this.current
      },
      //下一步
      next(stepIndex) {
        this.$refs.form.getForm().validateFields((err, values) => {
          if (!err) {
            if (this.current < 3) {
              this.current++
              stepIndex = this.current
            }
          }
        })
        return this.current
      },
      // 获取商品分类
      getCategory() {
        this.http.get(this, {
          url: this.api.category.list,
          data: {
            params: {}
          },
          success: function(me, data) {
            let obj = listToTree2(data, {
              primaryKey: 'categoryId',
              titleKey: 'categoryName'
            })
            me.cascaderData = obj
          }
        })
      },
      // 产品分类改变事件
      categoryChange(value, opt) {
        let selectData = opt
        this.selectData = selectData
        for (let i in selectData) {
          let category = selectData[i]
          let index = parseInt(i) + 1
          let categoryId = category.categoryId
          this.product['categoryId' + index] = categoryId
          if (i = selectData.length - 1) {
            this.getSpecifications(categoryId)
          }
        }

      },
      //添加参数组
      addGroup() {
        this.allSpecs.push({
          id: new Date().getTime(),
          group: '',
          allowDel: true,
          params: [{
            'id': new Date().getTime(),
            'k': '',
            'searchable': true,
            'type': 1,
            'allowDel': true,
            'sku': false,
            'selected': [],
            'options': [],
            'numerical': true,
            'unit': '',
            'v': ''
          }]
        })
        this.dataProces(this.allSpecs)
      },
      //填写参数项
      addGroupItem(item) {
        this.allSpecs.forEach((value) => {
          if (value.id == item.id) {
            value.params.push({
              'id': new Date().getTime(),
              'k': '',
              'searchable': true,
              'type': 2,
              'allowDel': true,
              'sku': false,
              'selected': [],
              'options': [],
              'numerical': true,
              'unit': '',
              'v': ''
            })
          }
        })
        this.dataProces(this.allSpecs)
      },
      //删除参数项,因为存在规格项所以需要对比参数名确定索引位置
      delGroupItem(item, opt, index) {
        this.allSpecs.forEach(({ id, params }) => {
          if (id == item.id) {
            params.forEach(({ id }, index) => {
              if (opt.id == id) {
                params.splice(index, 1)
              }
            })
          }
        })
        this.dataProces(this.allSpecs)
      },
      //删除参数组
      delGroup(item) {
        this.allSpecs.forEach(({ id }, index) => {
          if (id == item.id) {
            this.allSpecs.splice(index, 1)
          }
        })
        this.dataProces(this.allSpecs)
      },
      //参数组输入框修改
      changeGroup(event, item) {
        this.allSpecs.forEach((value, index) => {
          if (value.id == item.id) {
            value.group = item.group
          }
        })
      },
      //删除参数项,因为存在规格项所以需要对比参数名确定索引位置
      delGroupItem(item, opt, index) {
        this.allSpecs.forEach(({ id, params }) => {
          if (id == item.id) {
            params.forEach(({ id }, index) => {
              if (opt.id == id) {
                params.splice(index, 1)
              }
            })
          }
        })
        this.dataProces(this.allSpecs)
      },
      // 查询商品规格参数模板
      getSpecifications(categoryId) {
        if (categoryId && categoryId != '') {
          this.http.get(this, {
            url: this.api.specscategory.getSpecsCategory,
            params: {
              categoryId: categoryId
            },
            success: function(me, data) {
              if (data.specifications) {
                let result = JSON.parse(data.specifications)
                // 处理默认选项,从参数模板中读取
                result.forEach(({ params }) => {
                  params.forEach((item, index) => {
                    me.specificationsMap.set(item.k, item.options)
                  })
                })
              }
              if (me.isEdit == false) {
                me.allSpecs = result
              }

              me.dataProces(me.allSpecs)
            }
          })
        }
      },
      // 新增商品时数据处理
      dataProces(temp) {
        let commonTemplate = []
        let specialTemplate = []
        let count = 0
        let me = this
        temp.forEach(({ params }) => {
          params.forEach((item, index) => {
            if (!item.selected) {
              item.selected = []
            }
            // 取值规格模板中选项
            item.options = me.specificationsMap.get(item.k)
            if (!item.options) {
              item.options = []
            }
            if (item.sku == true) {
              specialTemplate.push({
                id: item.id,
                k: item.k,
                options: item.options,
                type: item.type,
                allowDel: item.allowDel,
                selected: item.selected
              })
            }
          })
        })
        //公共参数可能有多组,需单独处理
        for (let i = 0; i < temp.length; i++) {
          if (temp[i].params.length > 0) {
            let temp2 = temp[i].params
            let param = []
            for (let j = 0; j < temp2.length; j++) {
              if (!temp2[j].sku) {
                param.push(temp2[j])
              }
            }
            if (count !== temp2.length && param.length !== 0) {
              commonTemplate.push({
                id: temp[i].id,
                group: temp[i].group,
                allowDel: temp[i].allowDel,
                params: param
              })
            }
          }
        }
        console.log('公共参数', commonTemplate)
        console.log('私有参数', specialTemplate)
        this.specialSpecs = specialTemplate
        this.commonTemplate = commonTemplate
      },
      // 规格
      skuItemKChange(event, item) {
        this.allSpecs.forEach(({ id, params }) => {
          params.forEach(({ id }, index) => {
            if (item.id == id) {
              params[index].k = item.k
            }
          })
        })
      },
      // 删除规格项
      removeSku(item, index) {
        this.allSpecs.forEach(({ params }, i) => {
          params.forEach(({ id }, i) => {
            if (item.id == id) {
              params.splice(i, 1)
            }
          })
        })
        this.specialSpecs.splice(index, 1)
      },
      // 添加规格值
      addOption(selected) {
        console.log(selected)
        if (selected) {
          selected.push({ name: '', value: '' })
        }
      },
      // 删除规格值
      removeOption(index, option) {
        option.splice(index, 1)
      },
      dropdownClick(name, opt) {
        opt.name = name
      },
      // 颜色选择器点击事件
      headleChangeColor(color, item) {
        console.log(item)
        item.name = color.label
      },
      // 添加规格项
      addSku() {
        if (this.specialSpecs.length >= 5) {
          this.$message.info('规格最大为5项')
          return
        }
        let sku = {
          id: new Date().getTime(),
          k: '',
          type: 2,
          allowDel: true,
          sku: true,
          options: [],
          selected: []
        }
        this.allSpecs[0].params.push(sku)
        this.specialSpecs.push(sku)
      },
      // 删除规格项
      removeSku(item, index) {
        this.allSpecs.forEach(({ params }, i) => {
          params.forEach(({ id }, i) => {
            if (item.id == id) {
              params.splice(i, 1)
            }
          })
        })
        this.specialSpecs.splice(index, 1)
      },
      resetForm() {
        this.$refs.form.resetFields()
      },
      // 批量设置价格
      batchSetPrice(value) {
        for (let i = 0; i < this.skus.length; i++) {
          if (this.isEdit) {
            this.skus[i].price = value
          } else {
            this.skus[i].price = value
          }
        }
      },
      // 批量设置数量
      batchSetNum(value) {
        for (let i = 0; i < this.skus.length; i++) {
          if (this.isEdit) {
            this.skus[i].num = value
          } else {
            this.skus[i].num = value
          }
        }
      },
      // 批量设置商品编号
      batchSetProductNo(e) {
        for (let i = 0; i < this.skus.length; i++) {
          if (this.isEdit) {
            this.skus[i].productNo = e.target.value
          } else {
            this.skus[i].productNo = e.target.value
          }
        }
      },
      handleSubmit() {
        const specTemplate = {}
        const visibleConfig = JSON.stringify(this.visibleConfig)
        console.log('specialSpecs', this.specialSpecs)
        this.specialSpecs.forEach(({ k, selected }) => {
          specTemplate[k] = selected
        })
        const skus = this.skus.filter(s => s.price).map(({ skuId, price, num, productNo, imageIds, images, indexes, ...rest }) => {
          // 拼接标题带上规格属性
          const title = this.product.productName + ' ' + Object.values(rest).join(' ')
          return {
            // 基本属性
            price: price, indexes, title, skuId, images, imageIds,
            num: num,
            images: JSON.stringify(images),
            productNo: productNo,
            // 特有规格参数
            ownSpec: JSON.stringify(rest)
          }
        })
        if (skus.length == 0) {
          this.$message.info('规格不能为空')
          return
        }
        if (skus[0].ownSpec=='{}') {
          this.$message.info('规格不能为空')
          return
        }
        for (let i = 0; i < this.skus.length; i++) {
          if (skus[i].price == '' || skus[i].price == 0) {
            this.$message.info('请填写价格')
            return;
          }
          if (skus[i].num == '' || skus[i].num == 0) {
            this.$message.info('请填写数量')
            return;
          }
        }
        this.product.allSpec = JSON.stringify(this.allSpecs)
        this.product.privateSpec = JSON.stringify(specTemplate)
        this.product.skus = JSON.stringify(skus)
        this.product.visibleConfig = visibleConfig
        this.product.groupIds = this.groupIds
        if (this.videoId) {
          this.fileIds.push(this.videoId)
        }
        let params = {
          id: this.product.productId,
          removeIds: this.removeIds.join(','),
          fileIds: this.fileIds.join(',')
        }
        let postParams = Object.assign({}, params, this.product)
        this.$refs.form.handlerSubmit(postParams)
      }
    },
    computed: {
      decorator: function() {
        let obj = [this.categoryName]
        let config = {}
        // config.initialValue = this.value
        obj.push(config)
        return obj
      },
      getData: function() {
        return this.$moment().format()
      },
      skus: {
        get: function() {
          // 1.过滤掉没有规格项的条目
          const arr = this.specialSpecs.filter(s => s.selected && s.selected.length > 0 && s.k != '')
          let me = this
          return arr.reduce((last, spec, index) => {
            const result = []

            last.forEach(o => {
              for (let i = 0; i < spec.selected.length; i++) {
                const option = spec.selected[i]
                const obj = {}
                Object.assign(obj, o)
                if (option.name) {
                  obj[spec.k] = option.name
                  // 拼接当前这个特有属性的索引
                  obj.indexes = (o.indexes || '') + '_' + i
                  if (index === arr.length - 1) {
                    const { indexes, ...rest } = obj
                    // 最后一次循环，添加价格、数量等字段
                    if (this.isEdit) {
                      const skuList = this.skuList
                      for (let i = 0; i < skuList.length; i++) {
                        let sku = skuList[i]
                        if (Object.is(JSON.stringify(rest), sku.ownSpec)) {
                          Object.assign(obj, { skuId: sku.skuId, price: sku.price, num: sku.num, productNo: sku.productNo, imageIds: sku.imageIds ? sku.imageIds : [], images: JSON.parse(sku.images ? sku.images : '[]') })
                          break
                        } else {

                          // 如果已经启用，回显源数据，否则，正常构造
                          Object.assign(obj, { skuId: '', price: 0, num: 0, productNo: 0, imageIds: [] })
                        }
                      }
                    } else {
                      Object.assign(obj, { skuId: '', price: 0, num: 0, productNo: 0, imageIds: [] })
                    }
                    // 去掉索引字符串开头的下划线
                    obj.indexes = obj.indexes.substring(1)
                    this.specialSpecs.forEach(({ k, selected }) => {
                      var o = this.obj.get(k)
                      if (o == null) {
                        o = { index: [] }
                      }
                      o.index.push(obj.indexes)
                      this.obj.set(k, o)
                    })

                  }
                  me.product.skus = result
                  result.push(obj)
                }
              }

            })

              console.info('skus', result)

            return result
          }, [{}])
        },
        set(newVal) {
        }
      },
      headers() {
        const headers = []
        // 商品规格表头
        const skuColumns = []
        // 公共表头
        const commonColumns = ['price', 'num', 'productNo', 'images', 'imageIds', 'skuId', 'indexes']
        // 遍历skus获取表头
        if (this.skus.length > 0) {
          Object.keys(this.skus[0]).forEach(k => {
            if (!commonColumns.includes(k)) {
              skuColumns.push({
                title: k,
                dataIndex: k,
                width: 100,
                align: 'center'
              })
            }
          })
          const sku = {
            title: '规格项',
            align: 'center',
            children: []
          }
          sku.children = skuColumns
          headers.push(sku, ...this.columns)
        }
        return skuColumns
      }
    },
    created() {
      this.getCategory()
    },
    watch: {},
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  .split {
    margin: 20px 50px 20px 0;
    height: 580px;
    border: 1px solid #dcdee2;

    .demo-split-pane {
      padding: 10px 0;
      height: 100px;
    }

    ul {
      margin-top: 10px;
      max-height: 512px;
      overflow: auto;
    }

    li {
      padding: 0 10px 0 20px;
      line-height: 30px;
      cursor: pointer;

      img {
        margin-right: 10px;
      }

      i {
        color: #ccc;
        margin-top: 5px;
      }
    }

    .active, li:hover {
      background-color: #bf1a21;
      color: #fff;

      i {
        color: #fff;
      }
    }

    .btn {
      margin-top: 20px;
      background-color: #bf1a21;
      color: #fff;
      width: 240px;
    }
  }


  .title {
    font-size: 16px;
    color: #bf1a21;
    position: relative;
    padding-left: 10px;
    margin: -15px 0 20px;

    &:before {
      position: absolute;
      content: "";
      width: 4px;
      height: 14px;
      top: 3px;
      left: 0;
      background-color: #bf1a21;
    }
  }

  .look {
    color: #bf1a21;
  }

  .delete {
    margin-left: -10px;
  }

  .complete_wrap {
    position: relative;

    .completes {
      width: 400px;
      height: 200px;
    }

    .complete_item {
      width: 150px;
      border-right: 1px solid #ccc;
    }

    .complete-child {
      display: none;
      padding-top: 10px;
      padding-left: 10px;
      position: absolute;
      left: 150px;
      top: 0px;
      background-color: #fff;
      width: 240px;
      height: 200px;
      white-space: pre-wrap;

      p {
        margin-bottom: 10px;
      }

      span {
        display: inline-block;
        margin-right: 10px;
      }
    }

    .complete_item:hover {
      .complete-child {
        display: block;
      }
    }

  }

  .complete-img {
    margin-right: 5px;
  }

  .skuitem {
    border: 1px dashed #ddd;
    padding: 10px;


    .delSku {
      display: none;
      position: absolute;
      top: -9px;
      color: #ed3f14;
      right: -7px;
      cursor: pointer;
      z-index: 100;
    }

    &:hover {
      .delSku {
        display: block;
      }
    }
  }


  .table {
    border: 1px solid #eee;

    input {
      margin: 0 10px;
    }
  }

  .table_header {
    background-color: #f5f4f4;
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #eeeeee;
    font-weight: bold;
    padding: 5px 10px 5px 1px;
  }

  .table_header2 {
    background-color: #f5f4f4;
    text-align: left;

    color: #FF005D;
    height: 30px;
    font-size: 13px;
    padding-left: 30px;

    i {
      font-size: 22px;
      margin-top: 4px;
      margin-right: 10px;
    }
  }

  .table_body {
    text-align: center;

    .table_tr {
      padding: 1px 2px 2px 0;
      border-bottom: 1px solid #eee;
      position: relative;

      .close {
        font-size: 18px;
        color: #c42d33;
        display: none;
        top: 7px;
      }

      &:hover {
        .close {
          display: block;
        }
      }

      &:last-child {
        border-bottom: none;
      }
    }

    i {
      position: absolute;
      right: -30px;
      top: 12px;
      cursor: pointer;
    }
  }

  .tip {
    color: #999;
    margin-left: 10px;

    span {
      color: #bf1a21;
    }
  }

  button.add {
    background-color: #bf1a21;
    color: #fff;

  }

  button.add.save {
    width: 300px;
    margin-left: 0px;
  }

  button i {
    font-size: 22px;
  }

  .upload {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px dashed #ddd;
    text-align: center;
    cursor: pointer;
  }

  .ivu-checkbox-group i {
    cursor: pointer;
  }

</style>
